<template>
	<view class="container">
		<view class="publish-box">
			<div style="padding: 10px;font-size: 12px;color: red;">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</div>
			<view class="branch-item">
				<view>投诉分院</view>
				<view class="right-box" @click="branchClick">
					<view>{{branchText}}</view> <u-icon name="arrow-right"></u-icon>
					<u-picker @cancel='cancelClick' @confirm='confirmClick' :show="show" keyName="label"
						:columns="columns"></u-picker>
				</view>
			</view>
			<view class="branch-item">
				<view>投诉对象</view>
				<view class="right-box">
					<u-input v-model="complaintTarget"></u-input>
				</view>
			</view>
			<view class="branch-item-col">
				<view>反馈类型</view>
				<view style="margin-top: 20rpx;">

					<view v-for='(item,index) in feedbackTypes' @click="typeMethodClick(item,index)" class="type-btn"
						:class="index==typeKey?'type-btn-active':''">{{item.text}}</view>
				</view>
			</view>
			<view class="branch-item-col">
				<view>反馈内容</view>
				<view style="margin-top: 20rpx;">
					<u--textarea v-model="description" placeholder="请输入内容" height='200rpx' count
						:maxlength='200'></u--textarea>
				</view>
			</view>
			<view class="branch-item-col">
				<view>图片上传</view>
				<view style="margin-top: 20rpx;">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="10"
						:previewFullImage="true"></u-upload>
				</view>
			</view>
			<!-- <view class="branch-item">
				<view>手机号：</view>
				<view class="right-box">
					<u-input v-model="phoneNumber"></u-input>
				</view>
			</view> -->
			<view @click="submitClick" class="submit-btn">确认提交</view>

		</view>
	</view>
</template>


<script>
	import baseUrl from "@/api/axios/baseUrl.js";
	import {
		serviceFeedback,
		allStore
	} from "@/api/axios/center.js";
	export default {
		data() {
			return {
				customerId: '',
				description: '',
				complaintTarget: '',
				fileList: [],
				typeKey: 0,
				branchText: '选择分院',
				feedbackType: '',
				feedbackTypes: [{
					text: '服务问题',
					id: '1'
				}, {
					text: '效果争议',
					id: '2'
				}, {
					text: '分院环境',
					id: '3'
				}, {
					text: '活动政策',
					id: '4'
				}, {
					text: '操作规范',
					id: '5'
				}, {
					text: '收费意义',
					id: '6'
				}, {
					text: '其它',
					id: '9'
				}],
				phoneNumber: '',
				show: false,
				columns: [],
				storeId: ''
			};
		},
		methods: {
			cancelClick() {
				this.show = false
			},
			confirmClick(data) {
				this.storeId = data.value[0].id
				this.show = false
				this.branchText = data.value[0].label
			},
			branchClick() {
				this.show = true
			},
			submitClick() {
				serviceFeedback({
					customerId: this.customerId,
					complaintTarget: this.complaintTarget,
					feedbackType: this.feedbackType,
					description: this.description,
					image: this.fileList.map(item => item.url).join(','),
					phoneNumber: this.phoneNumber
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: '提交成功',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 1000)
				})
			},
			typeMethodClick(item, index) {
				this.typeKey = index
				this.feedbackType = item.id
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(this[`fileList${event.name}`]);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl.url + "/xihefile/user/file/upload",
						filePath: url,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							console.log(uploadFileRes);
							console.log(uploadFileRes.data.data);
							let url = JSON.parse(uploadFileRes.data).data;
							console.log(url, "url");
							resolve(url);
						},
					});
				});
			},
		},
		created() {},
		mounted() {},
		onLoad(data) {
			this.phoneNumber = uni.getStorageSync('wePhone')
			this.customerId = uni.getStorageSync('customerId')
			let _this = this

			allStore().then((res) => {
				let arr = res.map((item) => {
					return {
						label: item.name,
						id: item.value,
					};
				});
				_this.columns.push(arr)
			});

		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>